<template>
  <view class="page">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="handleBack">
      <uni-icons type="back" size="24" color="#333" />
    </view>

    <!-- 顶部 -->
    <view class="header">
      <text class="title">体检预约</text>
    </view>

    <!-- banner -->
    <view class="banner">
      <image 
        class="banner-img" 
        :src="bannerUrl" 
        mode="aspectFill"
      />
    </view>

    <!-- 体检套餐分类 -->
    <view class="category-section">
      <view 
        v-for="(category, index) in categories" 
        :key="index" 
        class="category-item"
        @click="handleCategoryClick(category)"
      >
        <image 
          :src="category.icon" 
          mode="aspectFill" 
          class="category-icon"
        />
        <text class="category-text">{{ category.name }}</text>
      </view>
    </view>

    <!-- 热门体检套餐 -->
    <view class="package-section">
      <view class="section-header">
        <text class="section-title">
          {{ categories[0].name === '入职体检' ? '入职体检套餐' : '热门体检套餐' }}
        </text>
        <view 
          class="more" 
          @click="handleShowMorePackages"
        >
          <text class="more-text">更多</text>
          <uni-icons 
            type="right" 
            size="14" 
            color="#666"
          />
        </view>
      </view>

      <view class="package-list">
        <view 
          v-for="(pack, index) in displayedPackages" 
          :key="index" 
          class="package-card"
        >
          <view class="package-info">
            <view class="package-title">{{ pack.name }}</view>
            <view class="package-desc">{{ pack.desc }}</view>
            <view class="package-items">
              <text 
                v-for="(item, idx) in pack.items" 
                :key="idx"
                class="item-text"
              >
                {{ item }}
              </text>
            </view>
            <view class="package-price">
              <text class="price">¥{{ pack.price }}</text>
              <text class="original-price">¥{{ pack.originalPrice }}</text>
            </view>
          </view>
          <button 
            class="book-btn" 
            type="primary" 
            size="mini" 
            @click="showBookDialog(pack)"
          >
            立即预约
          </button>
        </view>
      </view>
    </view>

    <!-- 体检中心 -->
    <view class="center-section">
      <view class="section-header">
        <text class="section-title">推荐体检中心</text>
        <view 
          class="more" 
          @click="handleShowMoreCenters"
        >
          <text class="more-text">更多</text>
          <uni-icons 
            type="right" 
            size="14" 
            color="#666"
          />
        </view>
      </view>

      <view class="center-list">
        <view 
          v-for="(center, index) in displayedCenters" 
          :key="index" 
          class="center-card"
        >
          <image 
            :src="center.image" 
            mode="aspectFill" 
            class="center-img"
          />
          <view class="center-info">
            <text class="center-name">{{ center.name }}</text>
            <view class="center-tags">
              <text 
                v-for="(tag, idx) in center.tags" 
                :key="idx" 
                class="tag"
              >
                {{ tag }}
              </text>
            </view>
            <view class="center-address">
              <uni-icons 
                type="location" 
                size="14" 
                color="#666"
              />
              <text class="address-text">{{ center.address }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 预约弹窗 -->
  <uni-popup 
    ref="popup" 
    type="bottom" 
    @change="(e) => showDialog = e.show"
  >
    <view 
      class="popup-content" 
      v-if="currentPackage"
    >
      <view class="popup-header">
        <text class="popup-title">预约详情</text>
        <uni-icons 
          type="close" 
          size="20" 
          color="#666" 
          @click="closePopup"
        />
      </view>

      <view class="popup-body">
        <view class="popup-item">
          <text class="item-label">套餐名称</text>
          <text class="item-value">{{ currentPackage.name }}</text>
        </view>
        <view class="popup-item">
          <text class="item-label">套餐价格</text>
          <text class="item-value price">¥{{ currentPackage.price }}</text>
        </view>
        <view class="popup-item">
          <text class="item-label">预约时间</text>
          <uni-datetime-picker 
            type="date" 
            :start="new Date().toISOString().split('T')[0]"
          >
            <text class="picker-text">请选择预约时间</text>
          </uni-datetime-picker>
        </view>
      </view>

      <view class="popup-footer">
        <button 
          type="primary" 
          class="confirm-btn" 
          @click="handleBook"
        >
          确认预约
        </button>
      </view>
    </view>
  </uni-popup>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'

// 返回上一页
const handleBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

// 弹窗状态
const showDialog = ref(false)
const currentPackage = ref<any>(null)
const popup = ref<any>(null)

// 页面数据
const bannerUrl = 'https://ai-public.mastergo.com/ai/img_res/63a583c03e62742f81d9df04aa149298.jpg'

// 体检分类数据
const categories = [
  {
    name: '入职体检',
    icon: 'https://ai-public.mastergo.com/ai/img_res/3be56cce8c7c349f0bcf3949e9fbe796.jpg'
  },
  {
    name: '基础体检',
    icon: 'https://ai-public.mastergo.com/ai/img_res/18bbff06ba88854dcefe02b994ad1497.jpg'
  },
  {
    name: '婚前体检',
    icon: 'https://ai-public.mastergo.com/ai/img_res/857e8ef9c50653b70c68f08086fdd59d.jpg'
  }
]

// 入职体检套餐列表
const entryExamList = [
  {
    name: '标准入职体检套餐',
    desc: '基础入职体检必查项目',
    items: ['一般检查', '内科', '外科', '血液检查', '尿常规', '心电图'],
    price: '98',
    originalPrice: '138',
    hospital: '康泰体检中心',
    address: '健康路88号'
  },
  {
    name: '全面入职体检套餐',
    desc: '覆盖全面的入职体检项目',
    items: ['一般检查', '内科', '外科', '血液检查', '尿常规', '心电图', 'B超', '胸部X光'],
    price: '168',
    originalPrice: '238',
    hospital: '康泰体检中心',
    address: '健康路88号'
  },
  {
    name: '精英入职体检套餐',
    desc: '高管级入职体检项目',
    items: ['一般检查', '内科', '外科', '血液检查', '尿常规', '心电图', 'B超', '胸部X光', '肿瘤筛查'],
    price: '238',
    originalPrice: '338',
    hospital: '康泰体检中心',
    address: '健康路88号'
  }
]

// 套餐数据
const packages = ref(entryExamList)
const showingAllPackages = ref(false)
const displayedPackages = computed(() => {
  return showingAllPackages.value ? packages.value : packages.value.slice(0, 2)
})

// 体检中心数据
const centers = ref([
  {
    name: '康泰体检中心',
    image: 'https://ai-public.mastergo.com/ai/img_res/ab73e746c3ef34e71ecf433088c449f5.jpg',
    tags: ['专业医师', '一站服务'],
    address: '健康路88号'
  },
  {
    name: '美年大健康体检中心',
    image: 'https://ai-public.mastergo.com/ai/img_res/d4210924088438a94778c1f65cb6d0ff.jpg',
    tags: ['连锁品牌', '设备先进'],
    address: '和平路166号'
  },
  {
    name: '爱康国宾体检中心',
    image: 'https://ai-public.mastergo.com/ai/img_res/ea848d2a5a4d29f6f170d2d8e1d48df8.jpg',
    tags: ['高端医疗', '一对一服务'],
    address: '阳光大道238号'
  }
])

const showingAllCenters = ref(false)
const displayedCenters = computed(() => {
  return showingAllCenters.value ? centers.value : centers.value.slice(0, 1)
})

// 方法定义
// 弹窗相关方法
const showBookDialog = (pack: any) => {
  currentPackage.value = pack
  showDialog.value = true
  popup.value?.open()
}

const closePopup = () => {
  popup.value?.close()
  showDialog.value = false
}

const handleBook = () => {
  showDialog.value = false
  uni.showToast({
    title: '预约成功',
    icon: 'success'
  })
}

// 分类点击处理
const handleCategoryClick = (category: any) => {
  if (category.name === '入职体检') {
    packages.value = entryExamList
  } else if (category.name === '婚前体检') {
    packages.value = [
      {
        name: '婚前体检基础套餐',
        desc: '婚前体检必查项目',
        items: ['一般检查', '血液检查', '传染病检查', '影像检查', '优生优育咨询'],
        price: '168',
        originalPrice: '238'
      },
      {
        name: '婚前体检尊享套餐',
        desc: '全面婚前体检项目',
        items: ['一般检查', '血液检查', '传染病检查', '影像检查', '优生优育咨询', '染色体检查', '性激素六项'],
        price: '198',
        originalPrice: '268'
      },
      {
        name: '双人婚检套餐',
        desc: '新人共同体检优惠',
        items: ['常规体检', '血液检查', '传染病筛查', 'B超检查', '性激素检查', '遗传咨询'],
        price: '238',
        originalPrice: '338'
      }
    ]
  } else {
    packages.value = [
      {
        name: '基础体检套餐A',
        desc: '入职体检必选套餐',
        items: ['一般检查', '内科', '外科', '血常规'],
        price: '98',
        originalPrice: '138'
      },
      {
        name: '基础体检套餐B',
        desc: '全面基础检查',
        items: ['一般检查', '内科', '外科', '血常规', '彩超'],
        price: '138',
        originalPrice: '188'
      }
    ]
  }
}

// 展示更多相关方法
const handleShowMorePackages = () => {
  showingAllPackages.value = true
}

const handleShowMoreCenters = () => {
  showingAllCenters.value = true
}
</script>
<style>
/* 返回按钮样式 */
.back-btn {
  position: fixed;
  top: 60rpx;
  left: 30rpx;
  z-index: 100;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.back-btn:active {
  transform: scale(0.95);
}

/* 页面基础样式 */
page {
  height: 100%;
}

.page {
  background-color: #f5f6f7;
  min-height: 100%;
  padding: 20rpx;
  margin-top: 90rpx;
}

/* 顶部样式 */
.header {
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

/* Banner样式 */
.banner {
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.banner-img {
  width: 100%;
  height: 300rpx;
}

/* 分类部分样式 */
.category-section {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160rpx;
}

.category-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 16rpx;
}

.category-text {
  font-size: 28rpx;
  color: #333;
}

/* 通用标题栏样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.more {
  display: flex;
  align-items: center;
}

.more-text {
  font-size: 28rpx;
  color: #666;
  margin-right: 8rpx;
}

/* 套餐部分样式 */
.package-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  transition: all 0.3s ease;
}

.package-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #f8f9fa;
  margin-bottom: 20rpx;
}

.package-card:last-child {
  margin-bottom: 0;
}

.package-info {
  flex: 1;
  margin-right: 20rpx;
}

.package-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.package-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.package-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 16rpx;
}

.item-text {
  font-size: 24rpx;
  color: #666;
  background-color: #f0f1f2;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.package-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.price {
  font-size: 40rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 10rpx;
}

.book-btn {
  margin: 0;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

/* 体检中心样式 */
.center-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.center-card {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.center-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.center-img {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.center-info {
  flex: 1;
}

.center-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.center-tags {
  display: flex;
  gap: 10rpx;
  margin-bottom: 16rpx;
}

.tag {
  font-size: 24rpx;
  color: #666;
  background-color: #f0f1f2;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.center-address {
  display: flex;
  align-items: center;
}

.address-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 8rpx;
}

/* 弹窗样式 */
.popup-content {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.popup-body {
  padding: 20rpx 0;
}

.popup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.item-label {
  font-size: 28rpx;
  color: #666;
}

.item-value {
  font-size: 28rpx;
  color: #333;
}

.item-value.price {
  font-size: 32rpx;
  color: #ff6b6b;
  font-weight: bold;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.popup-footer {
  padding-top: 30rpx;
}

.confirm-btn {
  margin: 0;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
}

/* 按钮基础样式 */
button[type="primary"] {
  background-color: #007AFF;
  color: #FFFFFF;
  border: none;
  border-radius: 8rpx;
}

button[type="primary"].book-btn {
  font-size: 28rpx;
  padding: 12rpx 24rpx;
  height: 60rpx;
  line-height: 60rpx;
}

button[type="primary"].confirm-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}

button[type="primary"]:active {
  opacity: 0.8;
}
</style>
